<template>
  <div>
    <h1>商品管理</h1>
    <el-button type="primary" @click="$router.push('/tian')"
      >添加商品</el-button
    >
    <p></p>
    <select name="" id="">
      <option value="">按照商品名称查询</option>
      <option>按照商品ID查询</option>
    </select>
    <input type="text" placeholder="输入关键字" v-model="input" name="" id="" />
    <el-button @click="add">查询</el-button>
    <el-table border :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="ID" width="120"></el-table-column>
      <el-table-column label="信息" prop="name" width="600"> </el-table-column>
      <el-table-column label="价格" prop="price" width="120"> </el-table-column>
      <el-table-column label="状态" width="120"> </el-table-column>
      <el-table-column fixed="right" label="操作" width="120">
        <template>
          <el-button type="text" size="small">查看</el-button>
          <el-button type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background=""
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-size="pagesize"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
import { Table, TableColumn, Button, Pagination } from "element-ui";
import { list } from "@/api/index";
export default {
  name: "commodity",
  data() {
    return {
      tableData: [],
      pagesize: 10,
      currentpage: 290,
      total: 0,
      pageNum: "",
      input: "",
    };
  },
  components: {
    [Table.name]: Table,
    [TableColumn.name]: TableColumn,
    [Pagination.name]: Pagination,
    [Button.name]: Button,
  },
  mounted() {
    list({ pageNum: 1 }).then((res) => {
      this.tableData = res.data.data.list;
      this.total = res.data.data.total;
    });
  },
  filters: {
    types(val) {
      return val == 1 ? "在售" : "已下架";
    },
    types2(val) {
      return val == 2 ? "上架" : "下架";
    },
  },
  methods: {
    add() {
      this.list = this.tableData.filter((item) => {
        return item.name.includes(this.input);
      });
      this.input = "";
      console.log(this.list);
    },
    handleSizeChange(psize) {
      console.log(psize);
      this.pagesize = psize;
    },
    handleCurrentChange(cpage) {
      console.log(cpage);
      this.currentpage = cpage;
      list({ pageNum: this.currentpage }).then((res) => {
        this.tableData = res.data.data.list;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
</style>